<template>
	<view class="content">
		<view class="content_navbar">
			<u-navbar :is-mp-wx="true" :is-back="false" :border-bottom="false">
				<template v-slot:content>
					<view class="slot-wrap">
						<u-icon class="u-m-r-20" name="nav-back" color="#606266" size="44" @click="toBack"></u-icon>
						<u-search placeholder="请输入要搜索的内容" v-model="data.keyword" :show-action="false"
							@search="search"></u-search>
					</view>
				</template>
			</u-navbar>
			<view class="content_navbar_head" v-if="data.utype == 1">
				<u-dropdown active-color="#0D59DB" inactive-color="#101010" menu-icon="arrow-down-fill"
					@change="reusmeDropDwonChange">
					<u-dropdown-item :title="data.district_text || '地区'" disabled></u-dropdown-item>
					<u-dropdown-item :title="data.experience_text || '经验'" disabled></u-dropdown-item>
					<u-dropdown-item :title="data.education_text || '学历'" disabled></u-dropdown-item>
					<u-dropdown-item title="其他" disabled></u-dropdown-item>
				</u-dropdown>
			</view>
			<view class="content_navbar_head" v-else>
				<u-tabs class="u-border-bottom" active-color="#101010" inactive-color="#101010" :show-bar="false"
					:list="data.tabs" v-model="data.current" @change="tabsChange"></u-tabs>
				<u-dropdown v-if="data.current == 0" active-color="#0D59DB" inactive-color="#101010"
					menu-icon="arrow-down-fill" @change="jobDropDwonChange">
					<u-dropdown-item :title="data.district_text || '地区'" disabled></u-dropdown-item>
					<u-dropdown-item :title="data.category_text || '职位'" disabled></u-dropdown-item>
					<u-dropdown-item :title="data.wage_text || '薪资'" disabled></u-dropdown-item>
					<u-dropdown-item title="其他" disabled></u-dropdown-item>
				</u-dropdown>
				<u-dropdown v-else active-color="#0D59DB" inactive-color="#101010" menu-icon="arrow-down-fill"
					@change="corpDropDwonChange">
					<u-dropdown-item :title="data.district_text || '地区'" disabled></u-dropdown-item>
					<u-dropdown-item :title="data.trade_text || '行业'" disabled></u-dropdown-item>
					<u-dropdown-item :title="data.scale_text || '规模'" disabled></u-dropdown-item>
					<u-dropdown-item :title="data.nature_text || '性质'" disabled></u-dropdown-item>
				</u-dropdown>
			</view>

			<!-- 简历列表 -->
			<u-resume-list v-if="data.utype == 1" type="search" :height="data.height"
				:params="data.resumeParams"></u-resume-list>

			<view v-else>
				<!-- 职位列表 -->
				<u-job-list v-if="data.current == 0" :height="data.height" :params="data.jobParams"></u-job-list>
				<!-- 公司列表 -->
				<u-corp-list v-else :height="data.height" :params="data.corpParams"></u-corp-list>

			</view>
		</view>


		<!-- 薪资 -->
		<u-picker-salary v-model="data.isWage" :minwage="data.minWage" :maxwage="data.maxWage"
			@cancel="data.isWage = false" @close="data.isWage = false" @confirm="wageConfirm"></u-picker-salary>

		<!-- 地区 -->
		<u-select v-model="data.isDistrict" :list="data.districtList" @confirm="districtConfirm"></u-select>
		<!-- 职位 -->
		<u-select v-model="data.isCategory" mode="mutil-column-auto" :list="data.categoryList"
			@confirm="categoryConfirm"></u-select>
		<!-- 行业 -->
		<u-select v-model="data.isTrade" :list="data.tradeList" @confirm="tradeConfirm" value-name="id"
			label-name="name"></u-select>
		<!-- 规模 -->
		<u-select v-model="data.isScale" :list="data.scaleList" @confirm="scaleConfirm" value-name="id"
			label-name="name"></u-select>
		<!-- 性质 -->
		<u-select v-model="data.isNature" :list="data.natureList" @confirm="natureConfirm" value-name="id"
			label-name="name"></u-select>
		<!-- 经验 -->
		<u-select v-model="data.isExperience" :list="data.experienceList" @confirm="experienceConfirm" value-name="id"
			label-name="name"></u-select>
		<!-- 学历 -->
		<u-select v-model="data.isEducation" :list="data.educationList" @confirm="educationConfirm" value-name="id"
			label-name="name"></u-select>
	</view>
</template>

<script setup>
	import {
		nextTick,
		reactive
	} from "vue";
	import {
		onReady,
		onLoad,
		onUnload,
		onShow
	} from '@dcloudio/uni-app'
	const data = reactive({
		utype: uni.getStorageSync('utype'),
		keyword: '',
		tabs: [{
			name: '职位',
			index: 0
		}, {
			name: '企业',
			index: 1
		}],
		current: 0,
		// 其他数据
		screen: [],
		// 列表高度
		height: '',
		// 职位列表参数
		jobParams: {},
		// 公司列表参数
		corpParams: {},
		// 简历列表参数
		resumeParams: {},
		// 地区
		isDistrict: false,
		districtList: [],
		district_text: '',
		district: '',
		// 职位
		isCategory: false,
		categoryList: [],
		category_text: '',
		// 薪资
		isWage: false,
		wageList: [{
			label: '不限',
			value: '',
			extra: {
				min: 0,
				max: 0
			}
		}, {
			label: '3k以下',
			value: 1,
			extra: {
				min: 1000,
				max: 3000
			}
		}, {
			label: '3-5k',
			value: 2,
			extra: {
				min: 3000,
				max: 5000
			}
		}, {
			label: '5-10k',
			value: 3,
			extra: {
				min: 5000,
				max: 10000
			}
		}, {
			label: '10-20k',
			value: 4,
			extra: {
				min: 10000,
				max: 20000
			}
		}, {
			label: '20-50k',
			value: 5,
			extra: {
				min: 20000,
				max: 50000
			}
		}, {
			label: '50k以上',
			value: 6,
			extra: {
				min: 50000,
				max: 500000
			}
		}],
		wage_text: '',
		minWage: 500,
		maxWage: 1000,
		// 行业
		isTrade: false,
		tradeList: [],
		trade_text: '',
		// 规模
		isScale: false,
		scaleList: [],
		scale_text: '',
		// 性质
		isNature: false,
		natureList: [],
		nature_text: '',
		// 经验
		isExperience: false,
		experienceList: [],
		experience_text: '',
		// 学历
		isEducation: false,
		educationList: [],
		education_text: ''
	})
	onReady(() => {
		getClassifyInfo()
		getListHeight()
	})
	onLoad(({
		value
	}) => {
		data.keyword = value
		if (data.utype == 1) {
			data.resumeParams.keyword = value
		} else {
			if (data.current == 0) {
				data.jobParams.keyword = value
			} else {
				data.corpParams.keyword = value
			}
		}
	})
	onShow(() => {
		uni.$once('screen', info => {
			data.screen = info
			let res = info.map(item => {
				return {
					name: item.name,
					list: item.list.filter(item1 => item1.check)
				}
			})
			res.forEach((item, index) => {
				if (item.name == '薪资待遇') {
					data.resumeParams.minwage = item.list[0].min
					data.resumeParams.maxwage = item.list[0].max
				}
				if (item.name == '性别要求') {
					data.resumeParams.sex = item.list.map(item1 => {
						return item1.id
					}).join(',')
				}
				if (item.name == '年龄要求') {
					if (data.utype == 1) {
						data.resumeParams.minage = item.list[0].min
						data.resumeParams.maxage = item.list[0].max
					} else {
						data.jobParams.minage = item.list[0].min
						data.jobParams.maxage = item.list[0].max
					}
				}
				if (item.name == '经验要求') {
					data.jobParams.experience = item.list.map(item1 => {
						return item1.id
					}).join(',')
				}
				if (item.name == '学历要求') {
					data.jobParams.education = item.list.map(item1 => {
						return item1.id
					}).join(',')
				}
				if (item.name == '简历标签') {
					if (data.utype == 1) {
						data.resumeParams.tag = item.list.map(item1 => {
							return item1.id
						}).join(',')
					} else {
						data.jobParams.tag = item.list.map(item1 => {
							return item1.id
						}).join(',')
					}
				}
				if (item.name == '更新时间') {
					if (data.utype == 1) {
						data.resumeParams.settr = item.list.map(item1 => {
							return item1.id
						}).join(',')
					} else {
						data.jobParams.settr = item.list.map(item1 => {
							return item1.id
						}).join(',')
					}

				}
			})
		})
	})
	// 学历选择
	const educationConfirm = (e) => {
		data.education_text = e[0].label
		data.resumeParams.education = e[0].value
	}
	// 经验选择
	const experienceConfirm = (e) => {
		data.experience_text = e[0].label
		data.resumeParams.experience = e[0].value
	}
	// 规模选择
	const scaleConfirm = (e) => {
		data.scale_text = e[0].label
		data.corpParams.scale = e[0].value
	}
	// 行业选择
	const tradeConfirm = (e) => {
		data.trade_text = e[0].label
		data.corpParams.trade = e[0].value
	}
	// 性质选择
	const natureConfirm = (e) => {
		data.nature_text = e[0].label
		data.corpParams.nature = e[0].value
	}
	// 薪资选择
	const wageConfirm = (e) => {
		data.wage_text = e.min + '-' + e.max
		data.jobParams.minwage = e.min
		data.jobParams.maxwage = e.max
		data.minWage = e.min
		data.maxWage = e.max
		data.isWage = false
	}
	// 职位选择
	const categoryConfirm = (e) => {
		data.category_text = e[2].label ? e[2].label : e[0].label
		data.jobParams.category1 = e[0].value
		data.jobParams.category2 = e[1].value
		data.jobParams.category3 = e[2].value
	}
	// 地区选择
	const districtConfirm = (e) => {
		data.district_text = e[0].label
		data.district = e[0].value
		if (data.utype == 1) {
			data.resumeParams.district1 = e[0].value
		} else {
			if (data.current == 0) {
				data.jobParams.district1 = e[0].value
			} else {
				data.corpParams.district1 = e[0].value
			}
		}

	}
	// 简历筛选条件
	const reusmeDropDwonChange = (index) => {
		if (index == 0) {
			data.isDistrict = true
		}
		if (index == 1) {
			data.isExperience = true
		}
		if (index == 2) {
			data.isEducation = true
		}
		if (index == 3) {
			uni.$u.route('pages/pagesHome/screen', {
				item: JSON.stringify(data.screen)
			})
		}
	}
	// 公司筛选条件
	const corpDropDwonChange = (index) => {
		if (index == 0) {
			data.isDistrict = true
		}
		if (index == 1) {
			data.isTrade = true
		}
		if (index == 2) {
			data.isScale = true
		}
		if (index == 3) {
			data.isNature = true
		}
	}
	// 职位筛选条件
	const jobDropDwonChange = (index) => {
		if (index == 0) {
			data.isDistrict = true
		}
		if (index == 1) {
			data.isCategory = true
		}
		if (index == 2) {
			data.isWage = true
		}
		if (index == 3) {
			uni.$u.route('pages/pagesHome/screen', {
				item: JSON.stringify(data.screen)
			})
		}
	}
	// 获取字典表信息
	const getClassifyInfo = async () => {
		let params = {
			type: 'citycategory,jobcategory,companyNature,companyScale,trade,experience,experience,education'
		}
		let res = await uni.$u.api.getClassifyInfo({
			params
		})
		// 地区列表
		data.districtList = res.citycategory
		data.districtList.unshift({
			value: '',
			label: '不限'
		})
		// 职位列表
		data.categoryList = res.jobcategory
		data.categoryList.unshift({
			value: '',
			label: '不限',
			children: [{
				children: [{}]
			}]
		})
		// 企业性质列表
		data.natureList = res.companyNature
		data.natureList.unshift({
			id: '',
			name: '不限'
		})
		// 企业行业列表
		data.tradeList = res.trade
		data.tradeList.unshift({
			id: '',
			name: '不限'
		})
		// 企业规模列表
		data.scaleList = res.companyScale
		data.scaleList.unshift({
			id: '',
			name: '不限'
		})
		// 经验列表
		data.experienceList = res.experience
		data.experienceList.unshift({
			id: '',
			name: '不限'
		})
		// 学历列表
		data.educationList = res.education
		data.educationList.unshift({
			id: '',
			name: '不限'
		})
	}
	// tab切换事件
	const tabsChange = (index) => {
		data.current = index
		data.jobParams.district1 = data.district
		data.corpParams.district1 = data.district
		search(data.keyword)
	}
	// 失去焦点时触发
	const blur = (value) => {
		if (data.utype == 1) {
			data.resumeParams.keyword = value
		} else {
			if (data.current == 0) {
				data.jobParams.keyword = value
			} else {
				data.corpParams.keyword = value
			}
		}
		saveKeyword(value)
	}
	// 搜索事件
	const search = (value) => {
		if (uni.$u.test.isEmpty(value)) return uni.$u.toast('搜索内容不能为空')
		if (data.utype == 1) {
			data.resumeParams.keyword = value
		} else {
			if (data.current == 0) {
				data.jobParams.keyword = value
			} else {
				data.corpParams.keyword = value
			}
		}

		saveKeyword(value)
	}
	//保存关键字到历史记录
	const saveKeyword = (value) => {
		uni.getStorage({
			key: 'historyKeys',
			success: (res) => {
				let historyKeys = JSON.parse(res.data);
				let findIndex = historyKeys.indexOf(value);
				if (findIndex == -1) {
					historyKeys.unshift(value);
				} else {
					historyKeys.splice(findIndex, 1);
					historyKeys.unshift(value);
				}
				//最多10个纪录
				historyKeys.length > 10 && historyKeys.pop();
				uni.setStorageSync('historyKeys', JSON.stringify(historyKeys))
				data.historyList = historyKeys; //更新历史搜索
			},
			fail: (e) => {
				let historyKeys = [value];
				uni.setStorage({
					key: 'historyKeys',
					data: JSON.stringify(historyKeys)
				});
				data.historyList = historyKeys; //更新历史搜索
			}
		})
	}
	// 返回上一页
	const toBack = () => {
		uni.$u.route({
			type: 'back'
		})
	}
	// 获取列表展示高度
	const getListHeight = async () => {
		let res = await uni.$u.getRect('.content_navbar');
		if (res) {
			data.height = (uni.$u.sys().windowHeight - res.height) + 'px'
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		&_navbar {
			.slot-wrap {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex: 1;
				padding: 0 30rpx;
				width: 100vw;

				:deep(u-search) {
					width: 100%;
				}
			}

			&_head {
				padding: 0 30rpx;
				// :deep(.u-dropdown__menu__item){
				// 	justify-content: flex-start;
				// }
			}
		}
	}
</style>